<template>
  <view class="random-number" :style="[vuex_theme]">
    <view class="random-number-input uv-flex">
      <uv-input placeholder="最小值..." border="bottom" v-model="min"></uv-input>
      <view class="random-number-input-cut">~</view>
      <uv-input placeholder="最大值..." border="bottom" v-model="max"></uv-input>
    </view>

    <view class="random-number-result uv-flex">
      <view class="random-number-result-box uv-flex">
        <!-- <view>{{ randomNumber ? randomNumber : "?" }}</view> -->
        <uv-count-to
          :startVal="0"
          :endVal="randomNumber"
          :duration="1000"
          color="#fff"
          fontSize="32"
        ></uv-count-to>
      </view>
    </view>

    <uv-button type="primary" text="生成随机数" @click="getRandomNumber"></uv-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      min: 1,
      max: 100,
      randomNumber: null
    }
  },
  methods: {
    getRandomNumber() {
      const min = parseInt(this.min)
      const max = parseInt(this.max)

      if (isNaN(min) || isNaN(max)) {
        uni.$uv.toast("值不能为空")
        return
      }

      if (min > max) {
        uni.$uv.toast("最小值不能大于最大值")
        return
      }

      const random = Math.floor(Math.random() * (max - min + 1) + min)

      this.randomNumber = random
    }
  }
}
</script>

<style lang="scss" scoped>
.random-number {
  padding: 0 25rpx;
  &-input {
    &-cut {
      padding: 0 40rpx;
    }
  }
  &-result {
    justify-content: center;
    margin: 200rpx auto;
    border: 2px solid $uv-primary;
    border-radius: 50%;
    &-box {
      justify-content: center;
      width: 300rpx;
      height: 300rpx;
      border-radius: 50%;
      background: $uv-primary;
      margin: 3px;
      color: #fff;
    }
  }
}
</style>
